<template>
  <view class="x-built-in-scan-code">
    <!-- <view class="scan-code-title" :style="{ height: navHeight + 'px' }">{{ options.title || '' }}</view> -->
    <view class="scan-code-camera-view">
      <camera class="scan-code-camera" mode="scanCode" device-position="back" flash="off"
              @scancode="onScanCodeHandler" @error="onCameraError"></camera>
      <view v-if="scanTipOption.show" class="scan-tip-view">
        <image :src="scanTipOption.iconPath" class="scan-tip-img"/>
        <text>{{ scanTipOption.text || '' }}</text>
      </view>
    </view>
    <view class="scan-code-center">
      <template v-if="$slots.center">
        <slot name="center"/>
      </template>
      <view v-else :style="'height: calc(100vh - ' + navHeight + 'px - 450rpx - 64rpx)'"
            class="scan-code-center-default">
        <view class="flex-center">
          <view class="scan-code-center-title">扫描结果</view>
        </view>
        <scroll-view scroll-y class="scroll-view">
          <view v-if="dataList.length" class="scroll-title">
            扫码数:{{ dataList.length }}, 总听数:{{ totalNumber }}
          </view>
          <view v-if="dataList.length" v-for="(item, index) in dataList" :key="index"
                class="scroll-list-cell border-separate-line">
            <view class="scroll-list-cell-index">{{ index + 1 }}</view>
            <view class="flex flex-align-center p-r-20">{{ item.scanCode }}</view>
            <view class="scan-code-info">
              <view>产品名称:{{ item.productName }}</view>
              <view>产品类型:{{ item.scanCodeType }}</view>
              <view>产品数量:{{ item.productNumber }}</view>
            </view>
            <view class="flex-align-center color-orange" @click="onDelete(item.code)">删除</view>
          </view>
          <view class="null-data-view" v-if="!dataList.length">
            <image src="/static/scan/noData.svg" class="null-data-image"/>
            <text>这里什么也没有......</text>
          </view>
        </scroll-view>
<!--        <view class="scan-code-center-foot">-->
<!--          <view class="flex m-r-20" v-show="dataList.length">-->
<!--            <tn-button :plain="true" color="#fff" width="100%" @click="close">关闭</tn-button>-->
<!--          </view>-->
<!--          <view class="flex m-r-20" :class="{ 'm-l-20': dataList.length }">-->
<!--            <tn-button :plain="true" color="#fff" width="100%" @click="onCancel">{{-->
<!--                dataList.length ? '清空' : '关闭'-->
<!--              }}-->
<!--            </tn-button>-->
<!--          </view>-->
<!--          <view class="flex m-l-20">-->
<!--            <tn-button color="#fff" width="100%" backgroundColor="rgba(255, 141, 26, 0.8)" @click="onConfirm">确定-->
<!--            </tn-button>-->
<!--          </view>-->
<!--        </view>-->
      </view>
    </view>
  </view>
</template>
<script>
import {getProductInfoDetail} from "@/apis/ProductInfoDetail";
import {
  addVehicleBringGoodsScanCode,
  deleteVehicleBringGoodsScanCode, getVehicleBringGoodsScanCodeList
} from "@/apis/VehicleBringGoodsScanCode";
import {getVehicleBringGoodsForm} from "@/apis/VehicleBringGoods";
import {getScanSettingList} from "@/apis/ScanSetting";

export default {
  props: {

    /**
     * 顶部导航栏高度 单位px
     */
    navHeight: {
      type: Number,
      default: 91
    },

    /**
     * 扫描成功的列表数据
     */
    dataList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      scanTipOption: {show: false},
      scanHandlerLoading: false,
      totalNumber: 0,
      scanType: null,
      vehicleBringGoodsCode: null,
      scanSetUpList: []
    }
  },

  computed: {
    iconPath() {
      return {
        success: '/static/scan/success.svg',
        warn: '/static/scan/warn.svg',
        error: '/static/scan/error.svg'
      }
    }
  },

  methods: {

    close() {
      uni.navigateBack()
    },

    async onDelete(item) {
      const index = this.dataList.findIndex(e => e.code === item)
      index > -1 && this.dataList.splice(index, 1)
      await deleteVehicleBringGoodsScanCode(item)
    },

    onLoad(option) {
      this.scanType = option.scanType
      this.vehicleBringGoodsCode = option.vehicleBringGoodsCode
    },

    onCancel() {
      if (this.dataList.length) {
        uni.showModal({
          title: '提示',
          content: '确定清空所有扫描内容',
          cancelColor: "#555",
          confirmColor: "#FF8D1A",
          success: res => {
            if (res.confirm) {
              this.dataList = []
            }
          }
        })
      } else {
        this.close()
      }
    },

    onConfirm() {
      uni.navigateBack()
    },

    async scanCallback({result, type}) {
      if (!['QR_CODE', 'barcode', 'qrcode'].includes(type)) {
        // 这里判断码的类型，
        this.scanTip({type: 'error', text: '请扫描正确的二维码'})
        return
      }
      try {
        if (this.scanSetUpList && this.scanSetUpList.length > 0) {
          this.scanSetUpList.forEach(model => {
            result = result.replace(model.urlStr, '')
          })
        }
        // 例如处理逻辑这样....
        if (this.dataList.find(e => e.scanCode === result)) {
          this.scanTip({type: 'warn', text: '已存在'})
          return
        }
        let productInfoData = (await getProductInfoDetail({packingOrIdentityCode: result})).data;
        if (productInfoData != null) {
          let addResult = (await addVehicleBringGoodsScanCode({
            scanCode: result,
            scanType: this.scanType,
            scanCodeType: productInfoData.scanCodeType,
            productNumber: productInfoData.productNumber,
            productName: productInfoData.productName,
            vehicleBringGoodsCode: this.vehicleBringGoodsCode
          })).data
          this.dataList.push({
            code: addResult,
            scanCode: result,
            productName: productInfoData.productName,
            scanCodeType: productInfoData.scanCodeType === 1 ? '包装码' : productInfoData.scanCodeType === 2 ? "身份码" : '',
            productNumber: productInfoData.productNumber
          })
        } else {
          this.dataList.push({
            scanCode: result
          })
        }
      } catch (e) {
        this.scanTip({type: 'warn', text: '已存在'})
        return
      }
      this.scanTip({type: 'success', text: '成功'})
    },

    // 扫码结果处理
    onScanCodeHandler({detail}) {
      if (this.scanTipOption.show || this.scanHandlerLoading) {
        return
      }
      this.scanHandlerLoading = true
      const {result, type} = detail
      this.scanCallback({result, type})
      this.scanHandlerLoading = false
    },

    onCameraError() {
      this.uni.toast('扫码相机启动错误')
    },

    // 扫描提示
    scanTip(option = {}) {
      const {type, text, millisecond = 1000, modalFlag} = option
      if (modalFlag) {
        this.scanTipOption = {show: true}
        uni.showModal({
          title: '提示',
          content: text,
          showCancel: false,
          confirmColor: "#FF8D1A",
          success: _ => {
            this.scanTipOption.show = false
          }
        })
      } else {
        this.scanTipOption = {
          show: true,
          iconPath: this.iconPath[type],
          text
        }
        setTimeout(() => {
          this.scanTipOption.show = false
        }, millisecond)
      }
    },
  },

  async mounted() {
    this.scanSetUpList = (await getScanSettingList()).data
    const vehicleBringGoodsScanList = (await getVehicleBringGoodsScanCodeList({scanType: this.scanType}, this.vehicleBringGoodsCode)).data
    if (vehicleBringGoodsScanList && vehicleBringGoodsScanList.length > 0){
      this.dataList = vehicleBringGoodsScanList.map(model => {
        return {
          code: model.code,
          scanCode: model.scanCode,
          productName: model.productName,
          scanCodeType: model.scanCodeType === 1 ? '包装码' : model.scanCodeType === 2 ? "身份码" : '',
          productNumber: model.productNumber
        }
      })
      vehicleBringGoodsScanList.forEach(model => {
        this.totalNumber += model.productNumber
      })
    }

  }
}
</script>
<style scoped lang="scss">
.x-built-in-scan-code {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(245, 246, 249);
  z-index: 10000;
  color: #333;

  .scan-code-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-weight: bold;
  }

  .scan-code-camera-view {
    position: relative;
    margin: 0 auto;
    width: 95%;
    height: 450rpx;
    border-radius: 20rpx;
    border: 6rpx solid rgba(255, 141, 26, 1);
    margin-top: 20rpx;
    overflow: hidden;

    .scan-code-camera {
      width: 100%;
      height: 100%;
    }

    .scan-tip-view {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      color: #FFF;
      justify-content: space-evenly;
      align-items: center;
      font-weight: bold;

      .scan-tip-img {
        width: 150rpx;
        height: 150rpx;
      }
    }

  }

  .scan-code-center {
    padding: 0 20rpx;
    margin-top: 20rpx;
    position: relative;

    .scan-code-center-default {
      position: relative;
      background-color: #FFF;
      border-radius: 20rpx;

      .scan-code-center-title {
        display: inline-block;
        border-bottom-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        padding: 10rpx 40rpx;
        background-color: rgba(255, 141, 26, 1);
        color: #FFF;
        font-size: 28rpx;
      }

      .scroll-view {
        height: calc(100% - 180rpx);

        .scroll-title {
          padding: 0 40rpx;
          font-size: 24rpx;
          color: #cccccc;
          height: 50rpx;
          border-bottom: #333 1px solid;
        }

        .scan-code-info {
          margin-left: 5rpx;
          font-size: 10px;
        }

        .scroll-list-cell {
          display: flex;
          padding: 26rpx 20rpx;

          .scroll-list-cell-index {
            margin-right: 20rpx;
            background-color: rgba(255, 141, 26, 1);
            color: #FFF;
            font-size: 30rpx;
            border-radius: 50%;
            position: relative;
            top: 2rpx;
            width: 46rpx;
            height: 46rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .null-data-view {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;

          .null-data-image {
            width: 400rpx;
            height: 400rpx;
          }

          text {
            color: #929292;
          }
        }
      }

      .scan-code-center-foot {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        padding: 20rpx 40rpx;

        .btn-cancel {
          color: rgba(255, 141, 26, 1) !important;
          border-color: rgba(255, 141, 26, 1) !important;
          background-color: transparent !important;
          border-radius: 20rpx;
          height: 92rpx;
          width: 100% !important;
          font-size: 32rpx;
        }
      }
    }
  }

  .border-separate-line {
    border-bottom: 2rpx solid #ececec;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex {
  flex: 1;
}

.color-orange {
  color: rgba(255, 141, 26, 1);
}

.p-r-20 {
  padding-right: 20rpx;
}

.m-r-20 {
  margin-right: 20rpx;
}

.m-l-20 {
  margin-left: 20rpx;
}
</style>